// Alert

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin alert {
  background-color: $--x-background;
  border: 0.0625rem solid $--x-border-300;
  border-radius: $--x-border-radius;
  padding: 0.5rem 1rem;
  position: relative;
  display: flex;
  align-items: center;
  &-close {
    position: absolute;
    top: 0.425rem;
    right: 0.25rem;
  }
  &-inner {
    width: 100%;
  }
  &-title.x-bold {
    font-weight: 600;
  }
  &-content {
    font-size: $--x-alert-content-font-size;
    line-height: 1.325rem;
    margin: 0.25rem 0 0 0;
  }
  &-icon.x-icon {
    font-size: $--x-alert-icon-font-size;
    margin-right: 0.5rem;
  }
  &-icon-medium {
    > .x-icon {
      font-size: 1.75rem;
    }
  }
  &-draggable {
    .cdk-drag-handle {
      cursor: move;
    }
  }
  @include type('success', $--x-success, $--x-success-900, $--x-success-600, $--x-success-400);
  @include type('info', $--x-info, $--x-info-900, $--x-info-600, $--x-info-400);
  @include type('warning', $--x-warning, $--x-warning-900, $--x-warning-600, $--x-warning-400);
  @include type('error', $--x-danger, $--x-danger-900, $--x-danger-600, $--x-danger-400);
}

@mixin type($type, $color, $background, $border-color, $close-color) {
  &-#{$type} {
    &.x-light {
      color: $color;
      background-color: $background;
      border-color: transparent;
      box-shadow: $--x-box-shadow $--x-box-shadow-base-color;
      x-button.#{$--x-alert}-close .x-button {
        color: $close-color;
        &:hover {
          color: $color;
        }
      }
    }
    &.x-dark {
      color: $background;
      background-color: $color;
      border-color: transparent;
      box-shadow: $--x-box-shadow $--x-box-shadow-base-color;
      x-button.#{$--x-alert}-close .x-button {
        color: $background;
        &:hover {
          color: $--x-background-100;
        }
      }
    }
    &.x-white {
      color: $--x-text-300;
      background-color: $--x-background;
      border-color: transparent;
      box-shadow: $--x-box-shadow $--x-box-shadow-base-color;
      .#{$--x-alert}-icon.x-icon {
        color: $color;
      }
      x-button.#{$--x-alert}-close .x-button {
        color: $--x-text-400;
        &:hover {
          color: $--x-text-300;
        }
      }
    }
  }
}
